<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>绘制矩形</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<canvas id="canvas" width="300" height="300"></canvas>

		<script type="text/javascript">
			function drawReac() {
				const canvasRef = document.getElementById('canvas')
				if (!canvasRef.getContext) return
				const ctx = canvasRef.getContext('2d')
				ctx.fillStyle = 'red'
				ctx.fillRect(10, 10, 100, 100)

				ctx.fillStyle = 'green'
				ctx.fillRect(110, 110, 200, 200)
				ctx.clearRect(150, 150, 50, 50)

				console.log('canvas', canvas)
			}

			drawReac()
		</script>
	</body>
</html>
